11. Div Soup Clean Up

Question:

Mmmm, tasty! A nice bowl of soup.

div soup

Wow, this problem set has a lot of food references. Maybe I should have eaten something before putting these exercises together…

While alphabet soup is great, div soup is not so great. Div soup occurs when the majority of a webpage is built with <div>s. Technically, there is nothing wrong with this, but cognitively this is a problem. Your HTML should be descriptive and communicate what is happening on the page.

div soup example

I wonder what this HTML does?

For this quiz, I want you to clean up some div soup. I've created a fictitious landing page and it will be your job to replace <div>s with more meaningful markup. Download the .zip file containing the site's HTML and CSS from the resources section or directly from this link and modify the HTML to use semantic elements. Use MDN's element reference if you need help.

Image Credit

Start Quiz:

Solution:

Here's my solution.

For brevity, I used ellipses (...) to denote the areas of the solution that didn't change.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->
    <title>Div Soup Clean Up</title>
    <!-- ... -->
  </head>
  <body>
    <header class="navbar-static-top">
      <section class="container">
          <a class="navbar-brand" href="#">Company Name</a>
          <nav>
            <!-- ... -->
          </nav>
      </section>
    </header>
    <section class="container hero">
      <!-- ... -->
      <div class="hero-text">
        <h1 class="headline">The Future is Here!</h1>
        <!-- ... -->
        <button class="btn btn-lg btn-primary" href="#">Sign up today</button>
      </div>
    </section>
    <section class="container">
      <article class="row">
        <!-- ... -->
      </article>
      <hr class="divider">
      <article class="row">
        <!-- ... -->
      </article>
      <hr class="divider">
      <article class="row">
        <!-- ... -->
      </article>
      <hr class="divider">
      <footer>
        <!-- ... -->
      </footer>
    </section>
  </body>
</html>

When completing the quiz, you shouldn't have noticed anything visually change; however, by cleaning up some of the <div>s you should have recognized how much easier it is to read the HTML.

As you are building websites, try to avoid div soup situations. Also, remember that semantic tags aren't your only tool in the battle for better HTML. You can use id and class attributes too!

INSTRUCTOR NOTE:

How to Complete this Quiz

  1. Download the landing page from the resources section or from here.
  2. Edit index.html using your favorite text editor. You'll need to replace certain <div>s with semantic elements to clean up the "div soup".
  3. Turn on the Udacity Feedback Chrome Extension.
  4. Once all of the tests pass, you'll receive a code. Copy and paste the code that appears into the next page to finish!


Good luck!